<template>
  <guide :guideObj="{title: config.configType}" @backHome="backHome">
    <el-popover
      placement="bottom"
      width="180"
      slot="button"
      v-model="visible2"
      >
      <p class="popover">因简单版设置里暂时没有该项配置，需要切换到旧版设置进行配置。旧版设置该项的位置在【设置】-【质检设置】</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
        <el-button type="primary" size="mini" @click.stop="jumpToConfig">切换</el-button>
      </div>
      <button type="button" slot="reference" class="el-button primary_btn" >我要自己配</button>
    </el-popover>
    <div slot="warn" class="description">
      温馨提示：
      <ul>
        <li>1.为了节省您的时间，售后人员将为您免费提供配置服务，只需填写下方的申请配置内容，点击提交，售后人员收到申请后会按照您的要求完成配置服务。
        </li>
        <li>2.您可以点击顶部工具条【?】里的【服务工单】查看您所有的配置申请的动态并进行回复。注意：工作时间为9:00——18:00，非工作时间不进行配置，如需紧急支持请拨打客服热线：4001-113-114。
        </li>
      </ul>
      </div>
    <div slot="directions" class="description">
      质检评分机制说明：
      <ul>
        <li>每条质检记录的考核总分为100分。</li>
        <li>首先确定评分等级，即优秀，合格，提醒，不合格的分值区间。</li>
        <li>接下来确定评分项以及每项评分项占比（所有占比分值加起来为100），即决定分值的考核关键因素，可以设置多个，例如服务态度，是否说了欢迎语，是否做了客户信息记录等，可根据自家考核机制设定。</li>
        <li>可以设置多个考核标准，针对不同的考核范围选择不同的标准模板来进行质检考核</li>
      </ul>
    </div>
    <el-row slot="application" :gutter="20">
      <el-col :span="12">
        <business-form :config="config" :cssStyle="{row: 16, placeHolder: '小提示: 请您描述下您要建立的质检考核模板，并说明是用于在线服务还是通话服务。'}" ref="businessForm" @backHome="backHome"></business-form>
      </el-col>
      <el-col :span="12">
        <div class="business-flow-example">
          <h2 class="font14" style="padding-bottom: 10px">配置说明模板</h2>
          <span class="copyText" @click="copyText"><i class="iconfont icon-fuzhi add-flow-color"></i>&nbsp;复制</span>
          <ul class="business-flow-example-ul" id="qualitycheck-copy">
            在线服务质检模板：售前质检20180601（模板名称）
            <li class="first">
              <ul class="second disclist">
                <li>
                  <ul class="circlelist">
                    <li>优秀：100-90</li>
                    <li>合格：89-70</li>
                    <li>提醒：69-60</li>
                    <li>不合格：59-0</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="first">
              <ul class="second disclist">
                <li>质检项：
                  <ul class="circlelist">
                    <li>服务态度：30</li>
                    <li>信息记录：10</li>
                    <li>欢迎语：10</li>
                    <li>沟通安抚：20</li>
                    <li>问题解答：20</li>
                    <li>用语专业：10</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </guide>
</template>

<script>
  import Guide from '../../../ui-modules/guide/index'
  import BusinessForm from './businessCommon'
  import Clipboard from 'clipboard-js'
  import {isHasMenu} from '@/utils/m7Utils'
  export default {
    name: 'qualitycheckHelp',
    data () {
      return {
        visible2: false
      }
    },
    props: {
      config: Object
    },
    components: {
      Guide,
      BusinessForm
    },
    activated () {
      this.$refs.businessForm.resetForm()
    },
    inject: ['back'],
    methods: {
      copyText () {
        let self = this
        Clipboard.copy(document.getElementById('qualitycheck-copy').innerText).then(
          function () {
            self.$message.success(self.$t('config.business.copySuccess'))
          }
        )
      },
      backHome () {
        this.back()
      },
      jumpToConfig () {
        this.visible2 = false
        if (isHasMenu('config_quality_check_template', this.$store.state.session.user)) {
          this.$router.push({path: '/index/config', query: {active: 'qualityCheckConfig'}})
        } else {
          this.$message.error('您没有权限跳转到质检设置，请联系管理员开通权限')
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "../../../../assets/common.styl"
  .description
    p
      padding 10px 0
    ul
      padding 10px 0
    ul ul
      padding 10px 0 10px 40px
    li
      display list-item
      margin:0
      line-height 26px
  .business-flow-example
    position relative
    margin: 20px auto 0
    padding 10px 30px
    background: #fafafa
    .copyText
      position absolute
      right 20px
      top 10px
      cursor pointer
    li
      padding 2px 0
  .icon-fuzhi
    color $c-main
  .popover
    padding 5px
</style>
